<template>
  <view class="home">
    <form-item :form-json="formJson">
      <template #action="{form}">
        <view class="action-bar">
          <up-button type="warning" shape="circle" color="#F87610" :loading="loading"
            @click="_custom_create(form)">确定新增</up-button>
        </view>
      </template>
    </form-item>

  </view>
</template>

<script setup>
  import {
    ref,
    onMounted
  } from 'vue';
  import { custom_create, house_config, resources } from '@/config/api';
  import { throttle } from 'uview-plus'
  import formItem from '@/components/form-item/form-item.vue';
  const loading = ref(false)
  const formJson = ref([{
    label: '客户姓名',
    border: true,
    placeholder: '请输入客户姓名',
    key: 'real_name',
    type: 'text'
  }, {
    label: '电话',
    border: true,
    placeholder: '请输入',
    key: 'phone',
    type: 'text',
    maxlength: 11
  }, {
    label: '意向区域',
    key: 'xiaoqu',
    type: 'text',
    placeholder: "请输入周边小区",
    border: true,
  }, {
    label: '价格',
    border: true,
    placeholder: '请输入',
    key: 'price',
    type: 'text',
    suffix: '万元'
  }, {
    label: '面积',
    border: true,
    placeholder: '请输入',
    key: 'space',
    type: 'text',
    suffix: '平米'
  }, {
    label: '选择户型',
    key: 'house_type',
    key_text: 'house_type_text',
    type: 'select',
    placeholder: "选择室卫厅",
    border: true,
    selectList: []
  }, {
    label: '楼层',
    border: true,
    placeholder: '请输入',
    key: 'floor',
    type: 'text'
  }, {
    label: '朝向',
    border: true,
    placeholder: '请输入',
    key: 'toward',
    type: 'text'
  }, {
    label: '装修',
    border: true,
    placeholder: '请输入',
    key: 'renovation',
    key_text: 'renovation',
    type: 'select',
    selectList: [],
  }, {
    label: '备注',
    border: true,
    placeholder: '请输入',
    key: 'remark',
    type: 'text'
  }, {
    label: '绑定房源',
    border: true,
    placeholder: '请选择',
    key: 'sell_id',
    key_text: 'sell_text',
    type: 'select',
    selectList: []
  }])
  onMounted(() => {
    _house_config()
    _resources()
  })
  const _resources = () => {
    resources({ page: 1, limit: 100 }).then(res => {
      formJson.value[10].selectList = res.data.map(item => {
        item.name = item.title
        return item
      })
    })
  }
  // 房源选项
  const _house_config = () => {
    house_config().then(res => {
      formJson.value[5].selectList = res.data.house_type
      formJson.value[8].selectList = res.data.renovation
    })
  }
  // 添加客户
  const _custom_create = (form) => {
    loading.value = true
    custom_create(form).then(res => {
      loading.value = false
      uni.$u.toast(res.msg)
      console.log(11111)
      setTimeout(() => {
        uni.navigateBack()
      }, 500)
    }).catch(() => {
      loading.value = false
    })
  }
</script>

<style scoped lang="scss">
  .home {
    min-height: 100vh;
    background: #fff;
    padding: 0 24rpx;
    padding-bottom: calc(180rpx + env(safe-area-inset-bottom));

    ::v-deep .u-form-item__body__left__content__label {
      font-size: 30rpx;
      font-weight: 500;
    }

    ::v-deep .u-form-item__body {
      padding: 35rpx 0;
    }

    ::v-deep .u-form-item__body__left__content__required {
      left: auto;
      right: -12rpx;
    }
  }

  .action-bar {
    padding: 30rpx;
    padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    z-index: 9;

  }
</style>